<!DOCTYPE HTML>
<html>
<head>
    <title>Codes</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=Ta27XmBT0ii84fbwXqEir0EaFqDhD2BZ"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>
    <script src="js/bootstrap.js"></script>
    <style>

        #container {
            height: 500px;
            width: 600px;
            margin-left: 300px;
        }

        .reserve {
            width: 50px;
            height: 50px;
            background-color: whitesmoke;
            display: none;
            position: absolute;
            border: 1px solid dimgray;
            border-radius: 10px;
        }

        .reserve_pic {
            position: absolute;
        }

        .reserve_button {
            margin-left: 30px;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">
    <el-tabs style="margin-left: 200px" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="查看附近车位" name="first">
            请在您附近选择一个车位
            <div id="container" class="container"></div>
        </el-tab-pane>
        <el-tab-pane label="查看历史订单" name="second" >

            <el-button type="primary" @click="history">点击查询</el-button>




            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderParkAddress"
                        label="车位地址"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderParkspaceNum"
                        label="车位号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderDay"
                        label="停车时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderPrice"
                        label="支付金额"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderSpacerecordTimeTtart"
                        label="停车入库时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderSpacerecordTimeEnd"
                        label="停车出库时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderStatus"
                        label="订单状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作">
                </el-table-column>
            </el-table>




        </el-tab-pane>
        <el-tab-pane label="充值" @click="dialogFormVisible = true" name="third">
            <!--			充值-->
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                <el-form-item
                        label="充值余额"
                        prop="age"
                        :rules="[
      { required: true, message: '金额不能为空'},
      { type: 'number', message: '金额必须为数字值'}
    ]"
                >
                    <el-input type="age" style="width: 200px" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">充值</el-button>
                    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>

			<form id="addMoneyForm" action="payMoney">
				<input type="hidden" name="type" value="1">
				<input type="hidden" id="money" name="money" :value="numberValidateForm.age">
				<input type="submit" style="display: none" value="支付宝支付">
			</form>
        </el-tab-pane>
        <el-tab-pane label="推荐" name="fourth">
            <DIV>
                <el-button @click="open" TYPE="text">推荐给其他人，其他人注册成功后赠送双方账户各赠送1张满50-20优惠券</el-button>
            </DIV>
        </el-tab-pane>
    </el-tabs>
</div>


<div class="reserve">
    <p class="reserve_pic">图片</p>
    <p class="reserve_button">按钮</p>
</div>


<script src="js/jquery-3.5.1.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    /*导航栏*/
    new Vue({
        el: "#app",
        data: {
            // activeIndex: '1',
            activeName: 'first',
            dialogFormVisible: false,
			numberValidateForm: {
				age: ''
			},
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData:[
                {
                    orderTime:'',
                    orderDay:'',
                    orderPrice:'',
                    orderParkspaceNum:'',
                    orderParkAddress:'',
                    orderSpacerecordTimeTtart:'',
                    orderSpacerecordTimeEnd:'',
                    orderStatus:'',
                    operate:'取消预约',
                }
            ],
            formLabelWidth: '120px'
        },
        methods: {
            // handleSelect:function(key, keyPath) {
            // 	console.log(key, keyPath);
            // }
            handleClick: function (tab, event) {
                console.log(tab, event);
            },
            submitForm() {
                console.log($("#money").val());
                $("#addMoneyForm").submit();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            open: function () {
                var vm = this;
                axios.get('code')
                    .then(function (resp) {
                        if (resp.data.success) {
                            var a = resp.data.object;
                            vm.$alert(a, '邀请码(分享给其他人注册时填入)', {
                                confirmButtonText: '确定'
                            });

                        }
                    })
            },
            history: function () {
                // alert("我进来了")
                console.log("我进来了")
                var vm = this;
                var params = {pageIndex: vm.tableCurr, pageSize: 5};
                axios.get("/queryHistory")
                    .then(function (resp) {
                        console.log(resp.data)
                        if (resp.data.success) {
                            console.log(resp);
                            console.log("返回数据：" + resp.data.content);
                            vm.tableData = resp.data.content;
                        } else {
                            alert(resp.data);
                        }
                    })
            }
        }
    })



    /*地图控件*/
    //判断是否支持 获取本地位置
    //获取当前地理信息
    window.navigator.geolocation.getCurrentPosition(success, error);
    //获取地理信息成功时的回调函数
    function success(position) {
        //从coords属性中获取经度维度信息
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        console.log(lat);
        console.log(lon);
        //创建地图对象
        var map = new BMap.Map("container");
        //设置地址的经纬度
        var point = new BMap.Point(lon, lat);
        //改变地图模式
        map.setMapType(BMAP_NORMAL_MAP);
        //设置地图中心
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
        //设置地图覆盖点
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        var markers = [];
        //发送ajax获取可用车位
        $.ajax({
            url: "/findPark",
            type: "get",
            dataType: "json",
            async: false,
            success: function (data) {
                var park = data.object;
                //点聚合
                var MAX = 10;
                for (var i = 0; i < park.length; i++) {
                    console.log(park[i]);
                    //获取经纬度
                    let long = park[i].parkspaceLong;
                    let lati = park[i].parkspaceLati;
                    let marker_point = new BMap.Point(long, lati);
                    //设置marker图标为水滴
                    var vectorMarker = new BMap.Marker(marker_point, {
                        // 指定Marker的icon属性为Symbol
                        icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                            scale: 2,//图标缩放大小
                            fillColor: "orange",//填充颜色
                            fillOpacity: 0.8//填充透明度a
                        })
                    });
                    var title = '';
                    if (park[i].parkspaceStatus == "1") {
                        title = '<span style="color:lightgreen;font-weight: bold">（车位可预约）</span>';
                    }
                    if (park[i].parkspaceStatus == "2") {
                        title = '<span style="color: orange;font-weight: bold">（车位已占用）</span>';
                    }
                    if (park[i].parkspaceStatus == "3") {
                        title = '<span style="color: red;font-weight: bold">（车位已停用）</span>';
                    }
                    var parkspaceStatus = park[i].parkspaceStatus;
                    var parkspaceId = park[i].parkspaceId;
                    var parkspacePrice = park[i].parkspacePriceHour;
                    //使用自定义属性记录信息
                    vectorMarker.customData = title + "-" + park[i].parkspaceAddress + "-" + parkspaceStatus + "-" + parkspaceId + "-" + parkspacePrice;
                    console.log(title);
                    //添加覆盖物
                    map.addOverlay(vectorMarker);
                    //点加入聚合点数组中
                    markers.push(vectorMarker);
                    vectorMarker.addEventListener("click", function () {
                        $(".reserve").css("display", "none");
                        //显示百度地图窗口
                        var title1 = this.customData.split("-")[0] + "-" + this.customData.split("-")[1];
                        var content = this.customData.split("-")[2] + "<br>" + "每小时单价：" + this.customData.split("-")[5] + "元";
                        var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, content, {
                            title: title1, //标题
                            panel: "panel", //检索结果面板
                            width: 270,
                            height: 50,
                            enableAutoPan: true, //自动平移
                            searchTypes: [
                                BMAPLIB_TAB_SEARCH,   //周边检索
                            ]
                        });
                        searchInfoWindow1.open(marker_point);
                        //显示预定按钮
                        if (this.customData.split("-")[3] === "1") {
                            //获取当前鼠标的位置
                            var x = event.clientX;
                            var y = event.clientY;
                            var id = this.customData.split("-")[4];
                            var address = this.customData.split("-")[2];
                            var price = this.customData.split("-")[5];
                            console.log(x + "-" + y)
                            $(".reserve_pic").html("<img src='/images/car-icon.jpg' height='30px' width='30px'/>");
                            // var url1 = 'http://192.168.80.64:8080/index.html';
                            // $(".reserve_button").html("<input type='button' parkId='"+this.customData.split("-")[3]+"' onclick='function x1() {window.open(url1);}' class='submitpark' value='预定'/>");
                            $(".reserve_button").html('<a style="background-color:green;color:white;width:50px" href="http://192.168.80.64:8080/pay.html?parkId=' + id + '&parkAddress=' + address + '&parkPrice=' + price + '">预定</a>');
                            $(".reserve").css({
                                "top": y + 40 + "px",
                                "left": x + "px",
                                "display": "block"
                            });
                            this.addEventListener('blur', function () {
                                $(".reserve").css("display", "none");
                            });
                        }
                    });

                }
                //生成一个marker数组，然后调用markerClusterer类即可实现点聚合
                var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
            }
        });
    }

    //获取地理信息失败时的回调函数
    function error(msg) {
        alert("获取您的地理信息失败");
    }
</script>
</body>
</html>